<script setup>
import imgLoginBg from '@/assets/images/login-bg.jpg'
import { isIdCard, PHONE_REG, LETTER_OR_NUMBER_OR___REG } from '@/utils'
import { userApi } from '@/api'

const router = useRouter()

const ruleForm = ref({
  userName: '',
  cardId: '',
  company: '',
  position: '',
  userPhone: '',
  loginName: '',
  loginPass: '',
})
const rules = {
  userName: {
    required: true,
    message: '请输入姓名',
    trigger: 'change',
  },
  cardId: [
    {
      required: true,
      message: '请输入身份证号码',
      trigger: 'change',
    },
    {
      validator: (rule, value, callback) =>
        isIdCard(value)
          ? callback()
          : callback(new Error('请输入正确的身份证号码')),
      trigger: 'blur',
    },
  ],
  company: {
    required: true,
    message: '请输入机构名称',
    trigger: 'change',
  },
  position: {
    required: true,
    message: '请输入职位',
    trigger: 'change',
  },
  userPhone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'change',
    },
    {
      pattern: PHONE_REG,
      message: '请输入正确的手机号',
      trigger: 'blur',
    },
  ],
  loginName: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'change',
    },
    {
      pattern: LETTER_OR_NUMBER_OR___REG,
      message: '账号只能由字母、数字、下划线组成',
      trigger: 'blur',
    },
  ],
  loginPass: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'change',
    },
    {
      min: 6,
      message: '密码不能少于6位',
      trigger: 'blur',
    },
  ],
}
const ruleFormRef = ref()
async function handleSubmit() {
  await ruleFormRef.value.validate()

  await userApi.registerAnchor(ruleForm.value)

  ElMessage.success('注册成功!')
  router.push('/login')
}
</script>

<template>
  <div
    class="min-h-screen flex flex-col items-center"
    :style="{ background: `url(${imgLoginBg}) left top / cover no-repeat` }"
  >
    <div class="max-w-lg justify-self-center p-4 sm:p-0 w-full mx-auto my-auto">
      <p class="text-center mb-6 -mt-16">注册主播账号</p>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-position="top"
        @submit.prevent="handleSubmit"
      >
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="ruleForm.userName" />
        </el-form-item>
        <el-form-item label="身份证" prop="cardId">
          <el-input v-model="ruleForm.cardId" />
        </el-form-item>
        <el-form-item label="机构名称" prop="company">
          <el-input v-model="ruleForm.company" />
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input v-model="ruleForm.position" />
        </el-form-item>
        <el-form-item label="手机号" prop="userPhone">
          <el-input v-model="ruleForm.userPhone" />
        </el-form-item>
        <el-form-item label="账号" prop="loginName">
          <el-input v-model="ruleForm.loginName" />
        </el-form-item>
        <el-form-item label="密码" prop="loginPass">
          <el-input v-model="ruleForm.loginPass" show-password />
        </el-form-item>
        <el-form-item>
          <div class="flex items-center w-full">
            <el-button class="flex-1" @click="router.back()"> 返回 </el-button>
            <el-button
              type="primary"
              class="flex-1"
              native-type="submit"
              @submit="handleSubmit"
            >
              注册
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
